<template>
  <div class="task-thing-table">
    <Table :data="model" :select-column="false" max-height="300px">
      <TableColumn label="事项标题" prop="matterTitle">
        <template v-slot="{ row }">
          <el-button link type="primary" @click="thingShowDialog.show(row.id)">
            {{ row.matterTitle }}
          </el-button>
        </template>
      </TableColumn>
      <TableColumn label="业务领域">
        <template v-slot="{ row }">
          <DictionaryShow
            parent-dictionary-value="runway"
            :value="row.domainId"
          />
        </template>
      </TableColumn>
      <TableColumn label="重点关注">
        <template v-slot="{ row }">
          <FocusShow :status="row.isFocus" />
        </template>
      </TableColumn>
    </Table>
    <ThingShowDialog ref="thingShowDialog" />
  </div>
</template>

<script setup lang="ts">
import TableColumn from '@/components/table/TableColumn.vue'
import Table from '@/components/table/Table.vue'
import DictionaryShow from '@/components/dictionary/DictionaryShow.vue'
import ThingShowDialog from '@/components/thing/ThingShowDialog.vue'
import { useTemplateRef } from 'vue'
import FocusShow from '@/components/statusShow/focus/FocusShow.vue'

const model = defineModel<any[]>()

const thingShowDialog =
  useTemplateRef<InstanceType<typeof ThingShowDialog>>('thingShowDialog')
</script>

<style scoped lang="scss">
.task-thing-table {
  width: 100%;
}
</style>
